<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <el-row type="flex">
                <el-col>
                    <span>时间范围：</span>
                    <el-date-picker
                        v-model="listQuery.times"
                        type="daterange"
                        :picker-options="pickerOptions"
                        @change="onRuleChange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right"
                    >
                    </el-date-picker>
                </el-col>
                <el-col>
                    <el-input
                        @input="onRuleChange"
                        placeholder="商品名称/商品编码"
                        v-model="listQuery.nameOrCode"
                    >
                    </el-input>
                </el-col>
            </el-row>
        </el-card>
        <div class="table-container">
            <el-table
                ref="tableRef"
                :data="dataList"
                style="width: 100%"
                v-loading="listLoading"
                @sort-change="onSortChange"
                border
            >
                <el-table-column label="商品" align="center">
                    <template slot-scope="scope">
                        <el-avatar shape="square" :size="50" :src="scope.row.resourceUrl">
                            <img
                                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                            />
                        </el-avatar>
                        <span class="avatar-side">{{ scope.row.goodsName }}</span></template
                    >
                </el-table-column>
                <el-table-column label="商品编码" prop="code" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.code }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单数" align="center" sortable prop="saleCount">
                    <template slot-scope="scope">{{ scope.row.saleCount }}</template>
                </el-table-column>
                <el-table-column label="订单金额" align="center" sortable prop="saleAmount">
                    <template slot-scope="scope">
                        <span>{{ scope.row.saleAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="退货笔数" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.refundCount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="退货金额" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.refundAmount }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="团长佣金" align="center" sortable prop="commissionAmount">
                    <template slot-scope="scope">
                        <span>{{ scope.row.commissionAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="供货成本" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.costAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="毛利" align="center" sortable prop="profitAmount">
                    <template slot-scope="scope">
                        <span>{{ scope.row.profitAmount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="毛利率" align="center" sortable prop="profitRate">
                    <template slot-scope="scope">
                        <span>{{ scope.row.profitRate }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :page-size="listQuery.pageSize"
                :page-sizes="[5, 10, 15]"
                :current-page.sync="listQuery.pageNum"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getDetailGoodsData } from '@/api/datas';
import { pickerOptions } from '@/utils/index';
let yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);

const defaultListQuery = {
    pageNum: 1,
    pageSize: 5,
    times: [yesterday, yesterday],
    orderBy: undefined
};

export default {
    data() {
        return {
            pickerOptions,
            listLoading: false,
            dataList: [],
            listQuery: Object.assign({}, defaultListQuery),
            total: null,
            timerId: null
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.listLoading = true;
            getDetailGoodsData(this.listQuery).then(res => {
                this.listLoading = false;
                if (res.data.success && Array.isArray(res.data.data)) {
                    this.dataList = res.data.data;
                    this.total = res.data.extra.total;
                } else {
                    this.dataList = [];
                    this.total = 0;
                }
            });
        },
        onRuleChange() {
            clearTimeout(this.timerId);
            this.timerId = setTimeout(() => {
                this.listQuery.pageNum = 1;
                this.listQuery.pageSize = 5;
                this.getList();
            }, 1000);
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        onSortChange({ column, prop, order }) {
            if (prop === 'saleCount' && order === 'ascending') {
                this.listQuery.orderBy = ' saleCount asc';
            } else if (prop === 'saleCount' && order === 'descending') {
                this.listQuery.orderBy = ' saleCount desc';
            } else if (prop === 'saleAmount' && order === 'ascending') {
                this.listQuery.orderBy = ' saleAmount asc';
            } else if (prop === 'saleAmount' && order === 'descending') {
                this.listQuery.orderBy = ' saleAmount desc';
            } else if (prop === 'commissionAmount' && order === 'ascending') {
                this.listQuery.orderBy = ' commissionAmount asc';
            } else if (prop === 'commissionAmount' && order === 'descending') {
                this.listQuery.orderBy = ' commissionAmount desc';
            } else if (prop === 'profitAmount' && order === 'ascending') {
                this.listQuery.orderBy = ' profitAmount asc';
            } else if (prop === 'profitAmount' && order === 'descending') {
                this.listQuery.orderBy = ' profitAmount desc';
            } else if (prop === 'profitRate' && order === 'ascending') {
                this.listQuery.orderBy = ' profitRate asc';
            } else if (prop === 'profitRate' && order === 'descending') {
                this.listQuery.orderBy = ' profitRate desc';
            }
            this.getList();
        }
    }
};
</script>
<style lang="scss" scoped>
.avatar-side {
    vertical-align: top;
    display: inline-block;
    height: 50px;
    line-height: 50px;
}
</style>
